<template>
	<view>
		<view class="page">
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon"   @click="back">
				<image class="img"
					src=""
					mode="aspectFill"></image>
			</view>
			<view class="top-title" >{{title}}</view>
		</view>
		<view class="body" :style="`margin-top:`+$store.state.StatusBar.statusBar + `px`">
				<view class="list">
					<view class="item">
						<view class="label">目的地</view>
						<view>
							<input v-model="destination" type="text" placeholder="请输入目的地">
						</view>
			<!-- 			<view class="top-infr-icon" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="item">
						<view class="label">标签</view>
						<view>
							<input v-model="tag" type="text" placeholder="请输入标签">
						</view>
				<!-- 		<view class="top-infr-icon" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="item">
						<view class="label">对象</view>
						<view >
							<picker @change="bindName" :value="index" :range="nameArray">
								<!-- <view class="uni-input" v-if='nameArray[index]'>{{nameArray[index]}}</view> -->
								<span>{{name}}</span>
							</picker>
						</view>
						<view class="top-infr-icon2" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="item">
						<view class="label">出发时间</view>
						<view>
							<picker @change="bindSetOutTime" :value="index" :range="setOutTimeArray">
								<span>{{setOutTime}}</span>
							</picker>
						</view>
						<view class="top-infr-icon2" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="item">
						<view class="label">预计时间</view>
						<view>
							<picker @change="bindReachTime" :value="index" :range="reachTimeArray">
								<span>{{reachTime}}</span>
							</picker>
						</view>
						<view class="top-infr-icon2" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="item">
						<view class="label">出行方式</view>
						<view>
							<picker @change="bindTravel" :value="index" :range="travelArray">
								<span>{{travel}}</span>
							</picker>
						</view>
						<view class="top-infr-icon2" >
							<image class="img"
								src=""
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="item">
						<view class="label">补充说明</view>
						<view>
							<input v-model="remark" type="text" placeholder="空乏的说明是没有人报名的~">
						</view>
					</view>
				</view>
				<view class="button" @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	import md5 from '@/utils/md5.js';
	export default {
		data() {
			return {
				title: '结伴旅行',
				info: {},
				nameArray: ['土豪男','秀外惠中气质女','霸道总裁','傻白甜','高富帅','白富美','萌妹子','阳光型男','文艺青年','怪蜀黎','泼辣妹子','小鲜肉','霸气女','男女通吃'],
				setOutTimeArray: ['近期出发','某个周末','具体日期','可商议','说走就走'],
				reachTimeArray: ['当天往返','一俩天','三四天','十天半个月','还准备回来吗','会不回不来'],
				travelArray: ['往返双飞','秀外惠中气质女','霸道总裁','傻白甜','高富帅','白富美','萌妹子','阳光型男','文艺青年','怪蜀黎','泼辣妹子','小鲜肉','霸气女','男女通吃'],
				destination: '',
				tag: '',
				name: '请选择对象',
				setOutTime: '请选择出发时间',
				reachTime: '请选择预计时间',
				travel: '请选择出行方式',
				remark: ''
			}
		},
		onLoad(option) {
			
		},
		onShow(option){
			this.getInfo();
		},
		methods: {
			to,
			back(){
				to()
			},
			async getInfo(){
				// let res = await this.$c.post("/app/exchange/getList")
				// if(res.code != 0){
				// 	uni.navigateTo({
				// 	  url: '/im/login/login'
				// 	});
				// }
				// this.info = res.data
			},
			bindName(e){
				this.name = this.nameArray[e.detail.value]
			},
			bindSetOutTime(e){
				this.setOutTime = this.setOutTimeArray[e.detail.value]
			},
			bindReachTime(e){
				this.reachTime = this.reachTimeArray[e.detail.value]
			},
			bindTravel(e){
				this.travel = this.travelArray[e.detail.value]
			},
			async submit(){
				if(this.name.indexOf("请选择") != -1){
					uni.showToast({
						title:this.name,
						icon:"none"
					})
					return;
				}
				if(this.setOutTime.indexOf("请选择") != -1){
					uni.showToast({
						title:this.setOutTime,
						icon:"none"
					})
					return;
				}
				if(this.reachTime.indexOf("请选择") != -1){
					uni.showToast({
						title:this.reachTime,
						icon:"none"
					})
					return;
				}
				if(this.travel.indexOf("请选择") != -1){
					uni.showToast({
						title:this.travel,
						icon:"none"
					})
					return;
				}
				let res = await this.$c.post("/app/trip/save?destination="+this.destination+"&tag="+this.tag+"&remark="+this.remark
				+"&name="+this.name+"&setOutTime="+this.setOutTime+"&reachTime="+this.reachTime+"&travel="+this.travel);
				if(res.code != 0){
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: "提交成功",
					icon: "none"
				})
				
				setTimeout(()=>{
					// this.getInfo()
					// this.$router.go(0)
					this.to()
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		padding:30rpx;
		height: 100vh;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding:10rpx;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
	}
	.body{
		padding-top:40rpx;
		text-align: center;
		.title{
			margin-top:40rpx;
			font-size:24rpx;
		}
		.top-infr-icon {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			right:50rpx;
			transform: translateY(-58rpx);
		}
		.top-infr-icon2 {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			right:50rpx;
		}
		.button{
			background-color: #aa8c72;
			color:#fff;
			display: inline-block;
			padding:30rpx 0rpx;
			border-radius: 30rpx;
			font-size:32rpx;
			width:80%;
			margin-top:30rpx;
		}
		.mark{
			width:100%;
			margin-top:30rpx;
			text-align: left;
			font-size: 20rpx;
			color: #9d9395; 
		}
		.list{
			margin-top:60rpx;
			.item{
				height:80rpx;
				padding:15rpx;
				position: relative;
				.label{
					position: absolute;
					left: 20rpx;
					line-height: 80rpx;
				}
				input{
					height: 80rpx;
					text-align: right;
					margin-right:80rpx;
				}
				span{
					position:absolute;
					right:80rpx;
					color: #7f7f7f;
				}
				border-bottom:1px solid #fdedf0;
			}
		}
	}

</style>